<template>
	<coreshop-page title="我的发票" mode="left">
		<view class="layout-invoice-box" v-if="state.list.length > 0">
			<view class="item-box" v-for="item,index in state.list" :key="index">
				<view class="invoice-msg">
					<image class="img" src="/static/images/member/invoice.png"></image>
					<view class="line-box">
						<view class="line">
							<view class="lab">开票金额：</view>
							<view class="val price">￥{{ item.amount }}</view>
						</view>
						<view class="line">
							<view class="lab">发票抬头：</view>
							<view class="val">{{ item.title }}</view>
						</view>
						<view class="line">
							<view class="lab">发票税号：</view>
							<view class="val">{{ item.taxNumber }}</view>
						</view>
						<view class="line" v-if="item.remarks">
							<view class="lab">开票备注：</view>
							<view class="val">{{ item.remarks }}</view>
						</view>

						<view class="tag-box">
							<uv-tags v-if="item.status == UserInvoiceStatusEnum.error" :text="item.statusName"
								type="error" size="mini"></uv-tags>
							<uv-tags v-else :text="item.statusName" type="success" size="mini"></uv-tags>
						</view>
					</view>
				</view>
				<view class="time-box">
					<view class="time">{{ item.createTime }}</view>
					<view class="name">{{ item.typeName }}</view>
				</view>
			</view>
			<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
		</view>
		<view v-else class="layout-empty-box">
			<coreshop-empty :mode="EmptyEnum.data" text="暂无发票"></coreshop-empty>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive } from 'vue';
	import { onReachBottom, onLoad } from '@dcloudio/uni-app';
	import { queryUserInvoiceList } from '@/core/api';
	import type { Response } from '@/core/models';
	import { UserInvoiceStatusEnum, EmptyEnum } from '@/core/enum';

	interface QueryParams {
		id : number | string;
	}

	const state = reactive<{
		list : Array<any>;
		totalPages : number;
		page : number,
		id : number | string;
	}>({
		list: [],
		totalPages: 1,
		page: 1,
		id: "",
	})


	onLoad((query : QueryParams) => {
		if (query.id) {
			state.id = query.id;
		}
		/** 获取发票列表 */
		getUserInvoiceList()
	})

	/** 获取发票列表 */
	const getUserInvoiceList = async () => {
		uni.showLoading({
			title: "加载中..."
		})
		let data = {
			page: state.page,
			limit: 10,
		}
		if (state.id) {
			data['id'] = state.id;
		}
		const userInvoice : Response<Array<any>> = await queryUserInvoiceList(data)
		state.totalPages = userInvoice.otherData?.totalPages;
		state.list = state.list.concat(userInvoice?.data);
		uni.hideLoading();
	}

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getUserInvoiceList();
		}
	});
</script>
<style lang="scss" scoped>
	@import './invoice.scss';
</style>